<template>
	<view class="tour-card u-shadow">
		<!-- 卡片头部 -->
		<view class="card-header">
			<view class="title">
				<text class="text">{{ data.dest_name }}</text>
				<image :src="`${imgBaseUrl}title-bg-icon.png`" class="title-bg" />
			</view>
			<view class="subtitle">{{ data.intro }}</view>
		</view>

		<!-- 图片展示 -->
		<image :src="data.cover_url" class="card-image" mode="aspectFill" />

		<!-- 信息部分 -->
		<view class="bg">
			<view class="car-bg">
				<view class="card-info">
					<view class="stats">
						<view>
							<text>{{ data.resort_count }}个</text>
							<view class="text-small-size pt-6">旅游景点</view>
						</view>
						<view v-if="data.resort_rated_count > 0">
							<text>{{ data.resort_rated_count }}个</text>
							<view class="text-small-size pt-6">A级景区</view>
						</view>
					</view>
					<view class="distance">
						<view>
							距您
							<text class="highlight">{{ distanceInKm(data.distance_in_meter) }}</text>
							公里
						</view>
						<br />
						<view class="text-bottom text-small-size text-ellipsis pt-6">{{ data.address }}</view>
					</view>
					<view class="action">
						<view class="btn">前往</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { distanceInKm } from "@/mixins/mixins"

const props = defineProps({
	data: {
		type: Object as () => any,
		default: () => null,
	},
})
const imgBaseUrl = inject("imgBaseUrl")
</script>

<style lang="scss" scoped>
.tour-card {
	width: 702rpx;
	height: 420rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 16rpx;

	.card-header {
		padding: 32rpx;
		color: #fff;
		height: 200rpx;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 3%, rgba(0, 0, 0, 0) 100%);
		.title {
			position: relative;
			font-size: 36rpx;
			font-weight: bold;
			.title-bg {
				position: relative;
				width: 58rpx;
				height: 44rpx;
				left: -40rpx;
				bottom: -20rpx;
			}
		}

		.subtitle {
			margin-top: 4rpx;
			font-size: 24rpx;
			opacity: 0.8;
		}
	}

	.card-image {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: -1;
		object-fit: cover;
	}

	.bg {
		background: rgba(255, 255, 255, 0.05);
		backdrop-filter: blur(20rpx);
	}

	.card-info {
		padding: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #ffffff;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);

		.text-small-size {
			font-size: 22rpx;
			opacity: 0.6;
		}

		.stats {
			display: flex;
			gap: 24rpx;

			view {
				text-align: center;
				line-height: 1.5;
			}
		}

		.distance {
			font-size: 28rpx;

			.highlight {
				font-weight: bold;
			}

			.text-bottom {
				width: 236rpx;
			}
		}
	}

	.action {
		display: flex;
		justify-content: flex-end;
		padding: 12rpx 16rpx;

		.btn {
			width: 112rpx;
			height: 56rpx;
			line-height: 56rpx;
			border-radius: 28rpx;
			font-size: 24rpx;
			text-align: center;
			border: 1px solid rgba(255, 255, 255, 0.7);
		}
	}
}
</style>
